<!-- 
订单查询
 -->
<template>
	<view class="order-view">
		<!-- 加载动画 -->
		<loading ref="loading" :custom="false" :shadeClick="true" :type="1" :shadeShow="false">
			<!-- <view class="test">自定义</view> -->
		</loading>
		<!-- 搜索框 -->
		<view class="order-view-search-top">
			<view class="order-view-search-top-left">
				<image src="../../static/search.png" mode=""></image>
				<input type="text" v-model="search" confirm-type="search" @confirm="getSearch" placeholder="请输入搜索内容" />
			</view>
			<button type="button" class="order-view-search-top-btn" @click="getSearch">搜索</button>

		</view>

		<view style="flex:1;overflow: auto;">
			<!-- 空状态 -->
			<view class="empty" v-if="list.length===0 || list==undefined">
				<image src="../../static/kk.svg" mode=""></image>
				<text>请搜索</text>
			</view>
			<!-- 样本信息 -->
			<view v-for="(item,index1) in list" :key="index1" class="order-view-container-box">
				<view class="order-view-container-box-info" @click="fndbClick(item)">
					<view>
						<text class="order-view-container-box-info-left">订单编号</text>
						<text class="order-view-container-box-info-right">{{item.batchCode}}</text>
					</view>
					<view>
						<text class="order-view-container-box-info-left">样本编号</text>
						<text class="order-view-container-box-info-right">{{item.sampleCodes}}</text>
					</view>
					<view>
						<text class="order-view-container-box-info-left">检测项目</text>
						<text class="order-view-container-box-info-right">{{item.productNames}}</text>
					</view>
					<view>
						<text class="order-view-container-box-info-left">医院</text>
						<text class="order-view-container-box-info-right">{{item.hospitals}}</text>
					</view>
					<view>
						<text class="order-view-container-box-info-left">受检人</text>
						<text class="order-view-container-box-info-right">{{item.sampleNames}}</text>
					</view>
					<view>
						<text class="order-view-container-box-info-left">创建时间</text>
						<text class="order-view-container-box-info-right">{{item.createdTime}}</text>
					</view>
					<view>
						<text class="order-view-container-box-info-left">创建人</text>
						<text class="order-view-container-box-info-right">{{item.createdByName}}</text>
					</view>
					<!-- 悬浮按钮 -->
					<!-- <view class="start">已完成</view> -->
				</view>

			</view>

		</view>
	</view>

</template>

<script>
	import baseUrl from '../../utils/config.js'
	import loading from '../../components/xuan-loading/xuan-loading.vue'
	export default {
		components: {
			loading
		},
		data() {
			return {
				list: [],
				search: '',
			};
		},
		
		onShow() {
			this.getData()
		},

		methods: {
			// 点击事件跳转
			fndbClick(item) {
				uni.navigateTo({
					url: `../orderViewInfo/orderViewInfo?id=${item.id}&sampleCodes=${item.sampleCodes}`
				})
			},
			// 搜索
			getSearch() {
				this.getData()
			},
			// 获取数据
			getData() {
				uni.request({
					url: baseUrl + "batch/batch-search",
					data: {
						userId: uni.getStorageSync('userId'),
						selectCode: this.search,
						batchStatus:"已提交"
					},
					//formdate格式
					header: {
						"Content-Type": "application/json",
						'token': uni.getStorageSync('token')
					},
					method: "POST",
					success: (res) => {
						console.log('订单查询数据', res)
						if(res.data.status == 200){
							this.list = res.data.data
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 3000,
								icon: 'none'
							});
						}
						
					},
					fail: (res) => {
						uni.showToast({
							title: '连接错误，请检查网络设置',
							duration: 2000,
							icon: 'none'
						});
					},
				})
			},
			close: function() {
				this.$refs.loading.close();
			},
			open: function() {
				this.$refs.loading.open();
			},
		}
	}
</script>

<style lang="scss">
	.order-view {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
		background-color: #f0f0f0;
		// background-color: #ccc;

		&-search-top {
			display: flex;
			align-items: center;
			margin: 20rpx;
			height: 60rpx;

			&-left {
				flex: 1;
				background-color: #fff;
				display: flex;
				align-items: center;
				height: 100%;
				border-radius: 30rpx;

				image {
					padding: 0 20rpx;
				}

				input {
					flex: 1;
				}
			}

			&-btn {
				width: 150rpx;
				color: #689ae3;
				font-size: 32rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0;
				outline: none;
				background-color: #f0f0f0;
			}

			button::after {
				border: none;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		&-container {
			flex: 1;
			overflow: auto;
			position: relative;
			margin-bottom: 20rpx;

			scroll-view {
				// height: 80rpx;
				background-color: #fff;
			}

			&-nav {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				&-item {
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						color: rgba(35, 39, 55, .5);
					}
				}

				.active {
					position: relative;

					text {
						color: #0f90d1;
					}

					&::after {
						background-color: #0f90d1;
						content: "";
						width: 100%;
						height: 4rpx;
						-webkit-border-radius: 2rpx;
						border-radius: 2rpx;
						position: absolute;
						left: 0;
						bottom: -20rpx;
					}

				}

				image {
					width: 40rpx;
					height: 40rpx;
				}

			}

			&-choice {
				position: absolute;
				z-index: 666;
				background-color: #fff;
				height: 240rpx;
				top: 80rpx;
				width: 100%;
				left: 0;
				transform: scaleY(0);
				transition: transform 0.3s;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				&-starttime,
				&-endtime {
					display: flex;
					height: 80rpx;
					align-items: center;
					justify-content: space-between;
					padding: 0 40rpx;

					text {
						color: rgba(35, 39, 55, .9);
					}

					view {
						display: flex;
						align-items: center;
						color: rgba(35, 39, 55, .5);
					}
				}

				&-btnbox {
					display: flex;

					&-btn {
						width: 50%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						color: #fff;
					}

					.reset {
						background-color: rgba(15, 144, 209, .5);
					}

					.ok {
						background-color: #0f90d1;
					}
				}

			}

			.active {
				transform: scaleY(1);
				transition: transform 0.3s;
			}

			.covering {
				background-color: rgba(0, 0, 0, 0.4);
				position: fixed;
				height: 100vh;
				width: 100vw;
				z-index: 600;
			}

			&-box {
				background-color: #fff;
				margin: 0 20rpx;
				margin-top: 20rpx;
				padding: 0 20rpx;
				border-radius: 30rpx;

				&-topRow {
					display: flex;
					align-items: center;
					justify-content: space-between;

					// margin: 0 40rpx 0 20rpx;
					&-left {
						max-width: 60%;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						font-weight: 700;
						color: rgba(35, 39, 55, .9);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					&-right {
						max-width: 40%;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						font-weight: 700;
						color: rgba(35, 39, 55, .9);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				&-stepBox {
					height: 140rpx;
					border-top: 1rpx solid #f0f0f0;
					padding: 30rpx 64rpx;
					display: flex;

					.active {
						text {
							color: #3d585f;
						}
					}

					.active::before {
						background-image: linear-gradient(161deg, #17b6bb, #0f90d1);
					}

					.active::after {
						border: 8rpx solid #0f90d1;
					}

					&-step {
						width: calc(100% / 3);
						padding-top: 48rpx;
						text-align: right;
						display: inline-block;
						position: relative;

						&::before {
							content: "";
							width: 100%;
							height: 16rpx;
							border-radius: 12rpx;
							background-color: rgba(203, 213, 215, .4);
							position: absolute;
							top: 10rpx;
							left: -10rpx;
							z-index: 1;
						}

						&::after {
							content: "";
							width: 22rpx;
							height: 22rpx;
							border: 8rpx solid rgba(203, 213, 215, .4);
							border-radius: 50%;
							background-color: #fff;
							position: absolute;
							top: 0;
							right: 0;
							z-index: 2;
						}
					}

					text {
						right: -18rpx;
						font-size: 26rpx;
						color: #cbd5d7;
						letter-spacing: 2rpx;
						position: absolute;
						bottom: -10rpx;
					}
				}

				&-info {
					position: relative;

					view {
						display: flex;
						font-size: 30rpx;
						height: 60rpx;
						align-items: center;
					}

					.start {
						position: absolute;
						top: 20rpx;
						right: 0;
						width: 120rpx;
						height: 50rpx;
						border-radius: 20rpx;
						border: 1rpx solid #c2c2c2;
						color: #888888;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					&-left {
						color: rgba(35, 39, 55, .9);
						width: 150rpx;

					}

					&-right {
						color: rgba(35, 39, 55, .5);
						flex: 1;
						overflow: hidden;
					}
				}

			}
		}

		.empty {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			image {
				width: 200rpx;
				height: 200rpx;
			}

			text {
				margin-top: 20rpx;
				color: rgba(35, 39, 55, .3);
			}
		}
	}
</style>
